<template>
  <div class="box">
    <div id="baiduMap" class="mapCont"></div>
    <div class="btn">
      <el-button type="primary" @click="loadVectData">加载GEOJSON</el-button>
      <el-button type="primary" @click="loadVectDataRemove">
        移除GEOJSON
      </el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import projzh from "projzh";
import Map from "ol/Map";
import View from "ol/View";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Fill, Icon, Stroke, Style, Circle } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import TileGrid from "ol/tilegrid/TileGrid";
import TileImage from "ol/source/TileImage";
import { XYZ } from "ol/source";
import Tile from "ol/layer/Tile";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import Projection from "ol/proj/Projection";
import { addProjection, addCoordinateTransforms } from "ol/proj";
import { applyTransform } from "ol/extent";

import icon from "@/assets/images/icon.png";
import { LoadBaiduMapLayer } from "@/utils/projzh";
import yunnan from "@/assets/json/00000000.json";

export default {
  name: "HelloWorld",
  data() {
    return {
      map: undefined,
      styles: {
        Point: [
          new Style({
            //点样式
            image: new Circle({
              radius: 5,
              fill: null,
              stroke: new Stroke({ color: "red", width: 1 }),
            }),
          }),
        ],
        LineString: [
          new Style({
            stroke: new Stroke({
              //线的边界样式
              color: "green",
              width: 1,
            }),
          }),
        ],
        MultiLineString: [
          new Style({
            stroke: new Stroke({
              //多线的边界样式
              color: "green",
              width: 1,
            }),
          }),
        ],
        MultiPoint: [
          new Style({
            //多点的点样式
            image: new Circle({
              radius: 5,
              fill: null,
              stroke: new Stroke({ color: "red", width: 1 }),
            }),
          }),
        ],
        MultiPolygon: [
          new Style({
            stroke: new Stroke({
              //多区的边界样式
              color: "blue",
              width: 1,
            }),
            fill: new Fill({
              //多区的填充样式
              color: "rgba(0, 0, 255, 0.1)",
            }),
          }),
        ],
        Polygon: [
          new Style({
            stroke: new Stroke({
              //区的边界样式
              color: "blue",
              lineDash: [4],
              width: 3,
            }),
            fill: new Fill({
              //区的填充样式
              color: "rgba(0, 0, 255, 0.1)",
            }),
          }),
        ],
        GeometryCollection: [
          new Style({
            stroke: new Stroke({
              //集合要素的边界样式
              color: "magenta",
              width: 2,
            }),
            fill: new Fill({
              //集合要素的填充样式
              color: "magenta",
            }),
            image: new Circle({
              //集合要素的点样式
              radius: 10,
              fill: null,
              stroke: new Stroke({
                color: "magenta",
              }),
            }),
          }),
        ],
        Circle: [
          new Style({
            stroke: new Stroke({
              //圆的边界样式
              color: "red",
              width: 2,
            }),
            fill: new Fill({
              //圆的填充样式
              color: "rgba(255,0,0,0.2)",
            }),
          }),
        ],
      },
      addStatus: false,
    };
  },
  mounted() {
    let center = [108.94238, 34.26097]; //西安钟楼
    // let center = [108.964031,34.217865]; //西安大雁塔
    // let center = [116.411794, 39.9068]; //北京东单

    let extent = [72.004, 0.8293, 137.8347, 55.8271];

    let baiduMercator = new Projection({
      code: "baidu",
      extent: applyTransform(extent, projzh.ll2bmerc),
      units: "m",
    });

    addProjection(baiduMercator);
    addCoordinateTransforms(
      "EPSG:4326",
      baiduMercator,
      projzh.ll2bmerc,
      projzh.bmerc2ll
    );
    addCoordinateTransforms(
      "EPSG:3857",
      baiduMercator,
      projzh.smerc2bmerc,
      projzh.bmerc2smerc
    );

    let bmercResolutions = new Array(19);
    for (let i = 0; i < 19; ++i) {
      bmercResolutions[i] = Math.pow(2, 18 - i);
    }

    let baidu = new Tile({
      source: new TileImage({
        projection: "baidu",
        maxZoom: 18,
        tileUrlFunction: function (tileCoord) {
          if (!tileCoord) {
            return "";
          }
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = tileCoord[2];

          if (x < 0) {
            x = "M" + -x;
          }
          if (y < 0) {
            y = "M" + -y;
          }
          return (
            "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" +
            x +
            "&y=" +
            y +
            "&z=" +
            z +
            "&styles=pl&udt=20151021&scaler=1&p=1"
          );
        },
        tileGrid: new TileGrid({
          resolutions: bmercResolutions,
          origin: [0, 0],
          extent: applyTransform(extent, projzh.ll2bmerc),
          tileSize: [256, 256],
        }),
      }),
      zIndex: 2,
      opacity: 0.2,
    });

    let iconFeature = new Feature({
      geometry: new Point(center),
      name: "Null Island",
      population: 4000,
      rainfall: 500,
    });

    let iconStyle = new Style({
      image: new Icon({
        scale: 1,
        // anchorXUnits: 'fraction',
        // anchorYUnits: 'pixels',
        src: icon,
      }),
    });

    iconFeature.setStyle(iconStyle);

    let vectorSource = new VectorSource({
      features: [iconFeature],
    });

    let vectorLayer = new VectorLayer({
      source: vectorSource,
      zIndex: 3,
    });

    const baiduMapLayer = LoadBaiduMapLayer(
      "http://192.168.20.215/gisanhui/",
      2,
      true,
      ".png"
    );

    const gaodeMapLayer = new Tile({
      title: "高德地图",
      source: new XYZ({
        url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
        wrapX: true,
      }),
      zIndex: 1,
    });

    this.map = new Map({
      target: "baiduMap",
      layers: [gaodeMapLayer, baiduMapLayer, vectorLayer],
      view: new View({
        center: center,
        zoom: 8,
        minZoom: 6,
        projection: "EPSG:4326",
      }),
    });
  },
  methods: {
    loadVectData() {
      // 避免重复加载
      if (this.addStatus) return;
      const vectorSourceGeoJson = new VectorSource({
        features: new GeoJSON().readFeatures(yunnan),
      });
      const vectorLayerGeoJson = new VectorLayer({
        source: vectorSourceGeoJson,
        style: this.styleFunction,
        preload: Infinity,
        zIndex: 10,
        visible: true,
      });
      this.map.addLayer(vectorLayerGeoJson);
      this.addStatus = true;

      //获取地图视图
      const view = this.map.getView();
      //平移地图
      view.setCenter([102.83, 24.88]);
      //地图缩放
      view.setZoom(6);
    },
    styleFunction(feature) {
      //根据要素类型设置几何要素的样式
      return this.styles[feature.getGeometry().getType()];
    },
    loadVectDataRemove() {
      // 删除图层
      const layers = this.map.getLayers();
      this.map.removeLayer(layers.item(3));
      this.addStatus = false;
    },
  },
};
</script>

<style scoped>
.mapCont {
  width: 100%;
  height: 600px;
}
.btn {
  text-align: left;
}
</style>
